<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="formcheck/theme/classic/formcheck.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="form.css" type="text/css" media="screen" />
		<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
		<script type="text/javascript" src="mootools-1.2-more.js"></script>
		<script type="text/javascript" src="formcheck/lang/en.js"></script>
		<script type="text/javascript" src="formcheck/formcheck2b1.js"></script>
		<script type="text/javascript">
			window.addEvent('domready', function(){check = new Form.Check('formular', {
				submitByAjax : false,			// Ajax submission
				display : {
					showErrors : 1,				// 0 : onSubmit, 1 : onSubmit & onBlur
					errorsLocation : 1,			// 1 : tips, 2 : before, 3 : after
					indicateErrors : 1,			// 0 : none, 1 : one, 2 : all
					listErrorsAtTop : false,	// list all errors at the top of the form

					closeTipsButton : 1,		// 0 : button is hidden, 1 : button is visible
					tipsOffsetX : -65,			// Left position of the tips box (margin-left)
					tipsPosition : 'right',		// If you want to set the tips position with relative or absolute value (page not centered)
					
					scrollToFirst : true,		// Smooth scroll the page to first error
					keepFocusOnError : 0,		// 0 : normal behaviour, 1 : field keep the focus as it remain errors
					fadeDuration : 300			// Transition duration
				}
			})});
		</script>
		<title>FormCheck 1.4</title>
	</head>
	<body>
		<dl>
			<dt>Control type :</dt>
			<dd>Validation when we leave a field or when we submit the form</dd>
			<dd>Show errors on tips over the field</dd>
			<dd>Display only one tip at once</dd>
			<dd>Tips don't flash on submit if errors remain</dd>
			<dd>Ability to close tips</dd>
		</dl>
		<form action="#" method="post" id="formular">
			<h2>Simple registration</h2>
			<fieldset>
				<legend>User informations</legend>
				<label>
					<span>Desired username : </span>
					<input type="text" name="user" class="validate['required','length[6,16]','alphanum'] text-input"></input>
				</label>
				<label>
					<span>First name : </span>
					<input type="text" name="firstname" class="validate['required','length[3,-1]','nodigit'] text-input"></input>
				</label>
				<label>
					<span>Last name : </span>
					<input type="text" name="lasttname" class="validate['required','length[3,-1]','nodigit'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Password</legend>
				<label>
					<span>Password : </span>
					<input type="password" name="password" class="validate['required','length[6,-1]','digit'] text-input"></input>
				</label>
				<label>
					<span>Confirm password : </span>
					<input type="password" name="password2" class="validate['confirm[password]'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Email</legend>
				<label>
					<span>Email address : </span>
					<input type="text" name="email" class="validate['required','email'] text-input"></input>
				</label>
				<label>
					<span>Confirm email address : </span>
					<input type="text" name="email2" class="validate['confirm[email]'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Conditions</legend>
				<div class="infos">Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div>
				<label>
					<span class="checkbox">I accept terms of use : </span>
					<input type="checkbox" name="agree" class="validate['required'] checkbox"></input>
				</label>
			</fieldset>
			<input class="submit" type="submit" value="Validate & Send the form!" />
			<hr />
		</form>
	</body>
</html>
